<template>
  <div>
    <el-header>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      style="height: 80px;z-index: 150;"
    >
    <el-menu-item @click="toHome()">
        <img class="logo" src="@/assets/imgs/logo.png" style="width:80px;margin-top: -5px;height:80px" >
    </el-menu-item>
    
      <el-menu-item v-if="isHome" style="width: 120px"></el-menu-item>
      <el-menu-item class="topMenu" v-for="item in topList" :key="item.id">
        <span @mouseenter="setTopListOn" @mouseover="getTopListItem(item.id)">
            {{item.name}}
        </span>
      </el-menu-item>
      <div class="search">
        <el-input placeholder="请输入搜索内容" v-model="search">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchClick"
          ></el-button>
        </el-input>
      </div>
    <el-divider content-position="left">黑鹰商城</el-divider>
    </el-menu>
    <el-collapse-transition>
    <div
      id="topItemllist"
      v-show="isTopList"
      @mouseenter="setTopListOn"
      @mouseleave="setTopListIn"
    >
            <ul class="itemul" >
              <li v-for="item in topListItem"
                :key="item.id" 
                class="item" @click="toDetails(item.id)">
                <img class="itemImg" :src="$target + item.imgPath"/>
                <span ><br/>{{ item.name }}</span>
                <span style="color:red;"><br/>{{ item.price }}</span>
              </li>
            </ul>
      </div>
      </el-collapse-transition>
    </el-header>
    </div> 
</template>

<script scoped>
export default {
  name: "TopHeader",
  data() {
    return {
      search: "",
      isHome: true,
      topList: "",
      isTopList: false,
      topListItem: "",
    };
  },
  created() {
    this.$axios
      .get("/api/menu/getTopMenu", {})
      .then((res) => {
        this.topList = res.data.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  },
  methods: {
    // 点击搜索按钮
    searchClick() {
      if (this.search != "") {
        // 跳转到全部商品页面,并传递搜索条件
        this.$router.push({ path: "/goods", query: { search: this.search } });
        this.search = "";
      }
    },
    toHome(){
      this.$router.push({
        path:"/"
      })
    },
    toDetails(id){
      this.$router.push({
        path:"/goods/details",
        query:{
          id:id
        }
      })
    },
    setTopListOn() {
      if (this.isTopList === false) {
        this.isTopList = true;
      }
    },
    setTopListIn() {
      if (this.isTopList === true) {
        this.isTopList = false;
      }
    },
    getTopListItem(id) {
      this.$axios
        .get(`/api/menu/getTopMenuItem/${id}`)
        .then((res) => {
          this.topListItem = res.data.data;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>

<style>
.itemImg{
    height: 100px;
}
.itemul{ 
    display: flex;
    justify-content:center;
}
.item { 
     padding: 30px 50px;
     text-align: center;
}
.search {
  width: 200px;
  margin-left: 83%;
  margin-top: 15px;
}

#topItemllist {   
    box-shadow:  0 3px 5px rgba(0, 0, 0, .12);
    z-index: 100;
    height: 220px;
    background-color: white;
    position: relative;
}
</style>